<template>
  <div>
    <div class="flex">
      <zbStore ref="storeRef" @selStore="selStore" @initStore="initStore" />
      <div class="flex1" style="width: 60%">
        <zbTable
          v-if="storeId"
          ref="tableRef"
          :api-fun="get_list"
          :storeId="storeId"
          @action="action"
        />
      </div>
    </div>
    <user-edit
      v-if="showEdit"
      v-model:visible="showEdit"
      :actionStatus="actionStatus"
      :editDataId="editDataId"
      :storeId="storeId"
      @done="done"
    />
    <allocate
      v-if="showAllocate"
      v-model:visible="showAllocate"
	  :editDataId="editDataId"
      @done="done"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { get_list } from '@/api/user/store_user';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined,
    RestOutlined
  } from '@ant-design/icons-vue';
  import zbTable from './components/zbTable/index.vue';
  import userEdit from './components/user-edit.vue';
  import allocate from './components/allocate.vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { useRouter } from 'vue-router';

  //是否显示离职员工
  const checked = ref(true);
  // 当前编辑数据
  const current = ref(null);
  // 是否显示编辑弹窗
  const showEdit = ref(false);
  const showAllocate = ref(false);
  // 编辑数据
  const editDataId = ref(null);
  // 编辑按钮数据
  const actionData = ref({});
  // 获取子组件
  const tableRef = ref(null);
  const actionStatus = ref('add');
  const storeId = ref(null);
  const { push } = useRouter();

  const initStore = (val) => {
    storeId.value = String(val.code);
  };
  const selStore = (val) => {
    storeId.value = String(val.code);
    tableRef.value.changeStoreCode(storeId.value);
    tableRef.value.reload();
  };

  /* 更新是否显示离职员工 */
  const change = (e) => {
    checked.value = e.target.checked;
    let is = checked.value ? 0 : 1;
    tableRef.value.changeIsShowLeave(is);
    tableRef.value.reload();
  };
  const done = (form) => {
		actionFn(actionData.value, form, reloadTable);
  };
  const reloadTable = () => {
    showEdit.value = false;
	showAllocate.value = false;
    tableRef.value.reload();
  };

  const action = (data) => {
    if (data.action_data.type == 'edit') {
      editDataId.value = data.row_data.id;
      actionData.value = data.action_data;
      showEdit.value = true;
      actionStatus.value = 'edit';
    }
    if (data.action_data.type == 'add') {
      editDataId.value = '';
      showEdit.value = true;
      actionStatus.value = 'add';
      actionData.value = { url: data.row_data.url };
    }
    if (data.action_data.type == 'allocate') {
	  //调配
      showAllocate.value = true;
	  editDataId.value = data.row_data.id;
	  actionData.value = data.action_data;
    }
    if (data.action_data.type == 'team') {
      push({
        path: `/user/store_teams/get_list`,
        query: {}
      });
    }
  };
</script>
